<template>
    <div class="warp" style="height:100%;">
        <div>
            <navbar :title="$t('knowledge_detail_article')" v-if="item.kbiType === 'ARTICLE'"></navbar>
            <navbar :title="item.kbiType === 'DOCUMENT' ? $t('knowledge_detail_document') : (item.kbiType === 'VEDIO' ? $t('knowledge_detail_vedio') : item.kbiType === 'AUDIO' ? $t('knowledge_detail_audio') : '') " ref="orderFullScreen" v-if="item.kbiType != 'ARTICLE'"></navbar>
        </div>
        <div class="content-noBottom">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="">
                <div style="height: 100%;">
                    <comment-list @deletecomments="deletecomments" @upLen="upLen" v-if="item && item.kbiStatus === 'ON'" :commentList='commentList' @change-success="changeSuccess" :moreCommentCount="true" :pageNo="pageNo" :id="item.kbiId" module="Knowledge" tkh-id="-1" :sendCommentOther="true" style="height: calc(100% - 211px)" ref="comment" :showComment="showComment" @focusInput="focusInput">
                        <input id="resourcesPath" style="position: absolute;left: -1px;top: -1px;z-index: -10">
                        <div ref="conmmentList">
                            <!--文章 start-->
                            <div v-if="item.kbiType === 'ARTICLE'" style="border-bottom: 1px dashed #cccccc;">
                                <div class="white-bg">
                                    <div class="paddingLR15">
                                        <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;">{{ item.kbiTitle }}</p>
                                        <div class="play-info">
                                            <p class="font-size11 color999" style="flex:1;display: flex;align-items: center" v-if="item.kbiPublishDatetime">
                                            {{ item.kbiPublishDatetime | substringTime }}<em class="point"></em>
                                            {{ item.kbiAccessCount  ? item.kbiAccessCount : 0 }}{{ item.kbiAccessCount > 1 ? $t("knowledge_pageviews_2") : $t("knowledge_pageviews") }}
                                            <span v-if="item.kbiDownload == '1' && item.attachments.length > 0"><em class="point"></em><a style="color: #999999" :href="appUrl + item.attachments[0].url" download>{{$t('download_file')}}</a></span>
                                            <em class="point"></em>
                                            <share-common size="12" code="KNOWLEDGE" :content="item.kbiTitle" :mtp-id="item.kbiId"></share-common>
                                            </p><!--浏览量-->
                                            <span class="play-tour iconfont iconB" @click="toPlayTour"></span>
                                        </div>
                                        <div style="padding-bottom: 25px;" v-if="item.kbiDesc">
                                            <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p><!--简介-->
                                            <p v-if="expand == false">{{item.kbiDesc}}</p>
                                            <p v-if="expand == true">{{expandText(item.kbiDesc)}}...</p>
                                        </div>
                                    </div>
                                    <div class="border-top2">
                                        <div class="paddingLR15 img-max-size">
                                            <div style="padding: 40px 0 30px;" v-html="$xss(htmlFilter(item.kbiContent))"></div>
                                            <div style="padding: 10px 0;color: #999" v-if="item.kbiDocumentSourceType === 1" @click="copyResourcePath(item.kbiDocumentSourceUrl)">{{$t('copy_original_address')}}</div>
<!--                                            <div class="selectType-box-02 clearfix">-->
<!--                                                <ul>-->
<!--                                                    <li v-for="tag in tags" :key="tag.tag_id">-->
<!--                                                        {{ tag.tag_title }}-->
<!--                                                    </li>-->
<!--                                                </ul>-->
<!--                                            </div>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--文章 end-->
                            <!--文档、视频 start-->
<!--                            <div class="view-body" style="box-sizing: border-box;padding-top: 211px;border-bottom: 1px dashed #cccccc;" v-if="item.kbi_type === 'DOCUMENT' || item.kbi_type === 'VEDIO'">-->
                            <div class="view-body" style="box-sizing: border-box;padding-top: 211px;border-bottom: 1px dashed #cccccc;" v-if="item.kbiType === 'DOCUMENT'">
                                <div class="white-bg">
                                    <div class="play-box" @click="openDoc(item.attachments[0].url)" v-if="item.kbiType === 'DOCUMENT'">
                                        <span class="btn-title">{{ $t("knowledge_open_doc") }}</span><!--打开文件-->
                                        <div class="bg-banner"></div>
                                    </div>
                                    <!-- <div class="play-box" @click="playVideo()" v-if="item.kbi_type === 'VEDIO'"> -->
<!--                                        <span class="icon-play" :style="{'z-index' : playedVideo ? '0' : '4'}"></span>-->
<!--                                        <div class="bg-banner" :style="{'z-index' : playedVideo ? '0' : '3'}"></div>-->
<!--                                        <div class="video-box" v-if="item.attachments && item.attachments.length>0 && item.attachments[0].kba_url">-->
<!--                                            <video ref="video" :src="appUrl + item.attachments[0].kba_url" controls controlslist="nodownload"></video>-->
<!--                                        </div>-->
<!--                                        <div class="video-box" v-if="item.kbi_online && item.kbi_online == 'ONLINE'">-->
<!--                                            <video ref="video" :src="item.kbi_content" controls controlslist="nodownload"></video>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                    <div class="paddingLR15">
                                        <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;display: flex;align-items: center">{{ item.kbiTitle }}</p>
                                        <div class="play-info">
                                            <p class="font-size11 color999" style="flex:1;" v-if="item.kbiPublishDatetime">
                                                {{ item.kbiPublishDatetime | substringTime }}<em class="point"></em>
                                                {{ item.kbiAccessCount ? item.kbiAccessCount : 0 }}{{ item.kbiAccessCount > 1 ? $t("knowledge_pageviews_2") : $t("knowledge_pageviews") }}
<!--                                                <span v-if="item.kbiDownload == '1'"><em class="point"></em><span @click="downDoc(appUrl + item.attachments[0].url)">下载文档</span></span>-->
                                                <span v-if="item.kbiDownload == '1' && item.attachments.length > 0"><em class="point"></em><a style="color: #999999" :href="appUrl + item.attachments[0].url" download>{{$t('download_file')}}</a></span>
                                                <em class="point"></em><share-common size="12" code="KNOWLEDGE" :content="item.kbiTitle" :mtp-id="item.kbiId"></share-common>
                                            </p><!--浏览量-->
                                            <span class="play-tour iconfont iconB" @click="toPlayTour"></span>
                                        </div>
                                        <div style="padding-bottom: 25px;" v-if="item.kbiDesc">
                                            <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p><!--简介-->
                                            <p v-if="expand == false">{{item.kbiDesc}}</p>
                                            <p v-if="expand == true">{{expandText(item.kbiDesc)}}...</p>
                                        </div>
                                        <div style="padding-bottom: 10px;color: #999;text-align: right" v-if="item.kbiDocumentSourceType === 1" @click="copyResourcePath(item.kbiDocumentSourceUrl)">{{$t('copy_original_address')}}</div>
                                    </div>
<!--                                    <div class="paddingLR15">-->
<!--                                        <div class="selectType-box-02 clearfix">-->
<!--                                            <ul>-->
<!--                                                <li v-for="tag in tags" :key="tag.tag_id">-->
<!--                                                    {{ tag.tag_title }}-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                            </div>
                            <!--文档、视频 end-->
                            <!-- 视频 start-->
                            <div class="view-body" style="box-sizing: border-box;padding-top: 211px;border-bottom: 1px dashed #cccccc;" v-if="item.kbiType === 'VEDIO'">
                                <div class="white-bg">
                                    <div class="play-box" @click="playVideo()" v-if="item.kbiType === 'VEDIO'">
                                        <span class="icon-play" :style="{'z-index' : playedVideo ? '0' : '4'}"></span>
                                        <div class="bg-banner" :style="{'z-index' : playedVideo ? '0' : '3'}"></div>
                                        <div class="video-box" v-if="item.attachments && item.attachments.length>0 && item.attachments[0].url">
                                            <video ref="video" :src="item.attachments[0].conversionPath ? appUrl + item.attachments[0].conversionPath : appUrl + item.attachments[0].url" controls controlslist="nodownload"></video>
                                        </div>
                                    </div>
                                    <div class="paddingLR15">
                                        <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;display: flex;align-items: center">{{ item.kbiTitle }}</p>
                                        <div class="play-info">
                                            <p class="font-size11 color999" style="flex:1;" v-if="item.kbiPublishDatetime">
                                                {{ item.kbiPublishDatetime | substringTime }}<em class="point"></em>
                                                {{ item.kbiAccessCount ? item.kbiAccessCount : 0 }}{{ item.kbiAccessCount > 1 ? $t("knowledge_pageviews_2") : $t("knowledge_pageviews") }}
<!--                                                <span v-if="item.kbiDownload == '1'"><em class="point"></em><span @click="downDoc(appUrl + item.attachments[0].url)">下载文档</span></span>-->
                                                <!-- <span v-if="item.kbiDownload == '1' && item.attachments.length > 0"><em class="point"></em><a style="color: #999999" :href="appUrl + item.attachments[0].url" download>下载文档</a></span> -->
                                                <em class="point"></em><share-common size="12" code="KNOWLEDGE" :content="item.kbiTitle" :mtp-id="item.kbiId"></share-common>
                                            </p><!--浏览量-->
                                            <span class="play-tour iconfont iconB" @click="toPlayTour"></span>
                                        </div>
                                        <div style="padding-bottom: 25px;" v-if="item.kbiDesc">
                                            <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p><!--简介-->
                                            <p v-if="expand == false">{{item.kbiDesc}}</p>
                                            <p v-if="expand == true">{{expandText(item.kbiDesc)}}...</p>
                                        </div>
                                        <div style="padding-bottom: 10px;color: #999;text-align: right" v-if="item.kbiDocumentSourceType === 1" @click="copyResourcePath(item.kbiDocumentSourceUrl)">{{$t('copy_original_address')}}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- 视频 end -->
                            <!-- 音频 start -->
                            <div class="view-body" style="box-sizing: border-box;padding-top: 211px;border-bottom: 1px dashed #cccccc;" v-if="item.kbiType === 'AUDIO'">
                                <div class="white-bg">
                                    <div class="play-box" @click="playAudio()" v-if="item.kbiType === 'AUDIO'">
                                        <span class="icon-play" :style="{'z-index' : playedAudio ? '0' : '4'}"></span>
                                        <div class="bg-banner" :style="{'z-index' : playedAudio ? '0' : '3'}"></div>
                                        <div class="video-box" style="display: flex;flex-direction: row;justify-content: center;align-items: center;" v-if="item.attachments && item.attachments.length>0 && item.attachments[0].url">
                                            <audio ref="audio" :src="item.attachments[0].conversionPath ? appUrl + item.attachments[0].conversionPath : appUrl + item.attachments[0].url" preload  controls="controls"></audio>
                                        </div>
                                    </div>
                                    <div class="paddingLR15">
                                        <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;display: flex;align-items: center">{{ item.kbiTitle }}</p>
                                        <div class="play-info">
                                            <p class="font-size11 color999" style="flex:1;" v-if="item.kbiPublishDatetime">
                                                {{ item.kbiPublishDatetime | substringTime }}<em class="point"></em>
                                                {{ item.kbiAccessCount ? item.kbiAccessCount : 0 }}{{ item.kbiAccessCount > 1 ? $t("knowledge_pageviews_2") : $t("knowledge_pageviews") }}
<!--                                                <span v-if="item.kbiDownload == '1'"><em class="point"></em><span @click="downDoc(appUrl + item.attachments[0].url)">下载文档</span></span>-->
                                                <!-- <span v-if="item.kbiDownload == '1' && item.attachments.length > 0"><em class="point"></em><a style="color: #999999" :href="appUrl + item.attachments[0].url" download>下载文档</a></span> -->
                                                <em class="point"></em><share-common size="12" code="KNOWLEDGE" :content="item.kbiTitle" :mtp-id="item.kbiId"></share-common>
                                            </p><!--浏览量-->
                                            <span class="play-tour iconfont iconB" @click="toPlayTour"></span>
                                        </div>
                                        <div style="padding-bottom: 25px;" v-if="item.kbiDesc">
                                            <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p><!--简介-->
                                            <p v-if="expand == false">{{item.kbiDesc}}</p>
                                            <p v-if="expand == true">{{expandText(item.kbiDesc)}}...</p>
                                        </div>
                                        <div style="padding-bottom: 10px;color: #999;text-align: right" v-if="item.kbiDocumentSourceType === 1" @click="copyResourcePath(item.kbiDocumentSourceUrl)">{{$t('copy_original_address')}}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- 音频 end -->
                            <!--图片 start-->
<!--                            <div class="view-body" style="box-sizing: border-box;padding-top: 211px;border-bottom: 1px dashed #cccccc;" v-if="item.kbi_type === 'IMAGE'">-->
<!--                                <div class="white-bg">-->
<!--                                    <div class="play-box" @click="alertTip">-->
<!--                                        <previewer :list="previewerImgs" ref="previewer" @on-index-change="indexChange"></previewer>-->
<!--                                        <swiper v-model="imgIndex"  ref="swiperImg" loop auto :list="picList" height="211px" :show-desc-mask=false :show-dots=false @on-index-change="indexChange"></swiper>-->
<!--                                    </div>-->
<!--                                    <span class="num-08"><i class="font-size12">{{ picIndex }}</i> / <i class="font-size11">{{ picList && picList.length }}</i></span>-->
<!--                                    <div class="paddingLR15">-->
<!--                                        <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;">{{ item.kbi_title }}</p>-->
<!--                                        <p class="font-size11 color999" style="padding-bottom: 25px;" v-if="item.kbi_publish_datetime">{{ item.kbi_publish_datetime | substringTime }}<em class="point"></em>{{ item.kbi_access_count }}{{ item.kbi_access_count > 1 ? $t("knowledge_pageviews_2") : $t("knowledge_pageviews") }}</p>&lt;!&ndash;浏览量&ndash;&gt;-->
<!--                                        <div style="padding-bottom: 25px;" v-if="item.kbi_desc">-->
<!--                                            <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p>&lt;!&ndash;简介&ndash;&gt;-->
<!--                                            <p v-if="expand == false">{{item.kbi_desc}}</p>-->
<!--                                            <p v-if="expand == true">{{expandText(item.kbi_desc)}}...</p>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="paddingLR15">-->
<!--                                        <div class="selectType-box-02 clearfix">-->
<!--                                            <ul>-->
<!--                                                <li v-for="tag in tags" :key="tag.tag_id">-->
<!--                                                    {{ tag.tag_title }}-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                            <!--图片 end-->
                        </div>
                    </comment-list>
                    <div  v-if="item && item.kbiStatus === 'OFF'">
                        <!--文章 start-->
                        <div v-if="item.kbiType === 'ARTICLE'">
                            <div class="white-bg">
                                <div class="paddingLR15">
                                    <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;">{{ item.kbiTitle }}</p>
                                    <p class="font-size11 color999" style="margin-bottom: 25px;">{{ item.kbiPublishDatetime | substringTime }}</p>
                                    <div style="padding-bottom: 25px;" v-if="item.kbiDesc">
                                        <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p><!--简介-->
                                        <p v-if="expand == false">{{item.kbiDesc}}</p>
                                        <p v-if="expand == true">{{expandText(item.kbiDesc)}}...</p>
                                    </div>
                                </div>
                                <div class="border-top2">
                                    <div class="paddingLR15">
                                        <div style="padding: 40px 0 30px;" v-html="$xss(item.kbiContent)"></div>
                                        <div style="padding: 10px 0;color: #999" v-if="item.kbiDocumentSourceType === 1" @click="copyResourcePath(item.kbiDocumentSourceUrl)">{{$t('copy_original_address')}}</div>
<!--                                        <div class="selectType-box-02 clearfix">-->
<!--                                            <ul>-->
<!--                                                <li v-for="tag in tags" :key="tag.tag_id">-->
<!--                                                    {{ tag.tag_title }}-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--文章 end-->
                        <!--文档、视频 start-->
<!--                        <div class="view-body" style="box-sizing: border-box;padding-top: 211px;" v-if="item.kbi_type === 'DOCUMENT' || item.kbi_type === 'VEDIO'">-->
                        <div class="view-body" style="box-sizing: border-box;padding-top: 211px;" v-if="item.kbiType === 'DOCUMENT'">
                            <div class="white-bg">
                                <div class="play-box" @click="openDoc(item.attachments[0].url)" v-if="item.kbiType === 'DOCUMENT'">
                                    <span class="btn-title">{{ $t("knowledge_open_doc") }}</span><!--打开文件-->
                                    <div class="bg-banner"></div>
                                </div>
<!--                                <div class="play-box" @click="playVideo()" v-if="item.kbi_type === 'VEDIO'">-->
<!--                                    <span class="icon-play" :style="{'z-index' : playedVideo ? '0' : '4'}"></span>-->
<!--                                    <div class="bg-banner" :style="{'z-index' : playedVideo ? '0' : '3'}"></div>-->
<!--                                    <div class="video-box" v-if="item.attachments && item.attachments.length>0 && item.attachments[0].kba_url">-->
<!--                                        <video ref="video" :src="appUrl + item.attachments[0].kba_url" controls controlslist="nodownload"></video>-->
<!--                                    </div>-->
<!--                                    <div class="video-box" v-if="item.kbi_online && item.kbi_online == 'ONLINE'">-->
<!--                                        <video ref="video" :src="item.kbi_content" controls controlslist="nodownload"></video>-->
<!--                                    </div>-->
<!--                                </div>-->
                                <div class="paddingLR15">
                                    <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;">{{ item.kbiTitle }}</p>
                                    <p class="font-size11 color999" style="padding-bottom: 25px;">{{ item.kbiPublishDatetime | substringTime }}</p>
                                    <div style="padding-bottom: 25px;" v-if="item.kbiDesc">
                                        <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p><!--简介-->
                                        <p v-if="expand == false">{{item.kbiDesc}}</p>
                                        <p v-if="expand == true">{{expandText(item.kbiDesc)}}...</p>
                                    </div>
                                    <div style="padding-bottom: 10px;color: #999;text-align: right" v-if="item.kbiDocumentSourceType === 1" @click="copyResourcePath(item.kbiDocumentSourceUrl)">{{$t('copy_original_address')}}</div>
                                </div>
<!--                                <div class="paddingLR15">-->
<!--                                    <div class="selectType-box-02 clearfix">-->
<!--                                        <ul>-->
<!--                                            <li v-for="tag in tags" :key="tag.tag_id">-->
<!--                                                {{ tag.tag_title }}-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </div>
                        </div>
                        <!--文档、视频 end-->
                        <!--图片 start-->
<!--                        <div class="view-body" style="box-sizing: border-box;padding-top: 211px;" v-if="item.kbi_type === 'IMAGE'">-->
<!--                            <div class="white-bg">-->
<!--                                <div class="play-box" @click="alertTip">-->
<!--                                    <previewer :list="previewerImgs" ref="previewer" @on-index-change="indexChange"></previewer>-->
<!--                                    <swiper v-model="imgIndex"  ref="swiperImg" loop auto :list="picList" height="211px" :show-desc-mask=false :show-dots=false @on-index-change="indexChange"></swiper>-->
<!--                                </div>-->
<!--                                <span class="num-08"><i class="font-size12">{{ picIndex }}</i> / <i class="font-size11">{{ picList && picList.length }}</i></span>-->
<!--                                <div class="paddingLR15">-->
<!--                                    <p class="font-size20" style="font-weight: bold;padding: 20px 0 15px;">{{ item.kbi_title }}</p>-->
<!--                                    <p class="font-size11 color999" style="padding-bottom: 25px;">{{ item.kbi_create_datetime | substringTime }}</p>-->
<!--                                    <div style="padding-bottom: 25px;" v-if="item.kbi_desc">-->
<!--                                        <p class="font-size15" @click="descMore()">{{ $t("mod_desc") }}<i class="more-icon" :class="{'cur' : !expand}" v-if="descIcon == true"></i></p>&lt;!&ndash;简介&ndash;&gt;-->
<!--                                        <p v-if="expand == false">{{item.kbi_desc}}</p>-->
<!--                                        <p v-if="expand == true">{{expandText(item.kbi_desc)}}...</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="paddingLR15">-->
<!--                                    <div class="selectType-box-02 clearfix">-->
<!--                                        <ul>-->
<!--                                            <li v-for="tag in tags" :key="tag.tag_id">-->
<!--                                                {{ tag.tag_title }}-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                        <!--图片 end-->
                    </div>
                </div>
            </van-pull-refresh>
                           <div>
                        </div>
            <!--tips-->
            <PlayTour ref="playTour" :data="playTour"  @playTourSuccessful="playTourSuccessful"></PlayTour>
            <van-dialog
            v-model="confirmTip"
            :confirmButtonText="$t('go_pre_page')"
            :title="$t('error_tip')"
            @confirm="$router.go(-1)">
                <p style="text-align:center;font-size: 14px;color: #999999;">{{ collectionMsg }}</p><!--退出此页面，您填写的内容将不会保留-->
            </van-dialog>
        </div>
        <div class="sendComment" v-if="item && item.kbiAppStatus === 'APPROVED' && item.kbiOpenCommentInd === 1">
        <div class="detail-voting" v-if="item">
            <span :class="{'cur': item.valuation}" class="commentFoot-like" @click="likeHandle(item.kbiId,item.valuation,-1)">{{item.valuationCount ? item.valuationCount : 0}}</span>
            <span :class="{'cur': item.favorites}" class="commentFoot-collection" @click="favoritesHandle(item.kbiId,item.favorites)" ref="collection">{{item.favoritesCount ? item.favoritesCount : 0}}</span>
            <span @click="jumpComment">{{ itmCommentTotal }}</span>
        </div>
        <div style="width: 100%">
          <div
            @focus="isFocusInput = true"
            @blur="inputBlur(0)"
            class="commentFoot-contenteditable"
            ref="commentInput0"
            contenteditable="true"
            :placeholder="$t('comment_write')"
          ></div>
          <!--写评论...-->
          <div class="commentFoot-issue" @click="postComment(0)" style="display:inline-block;">
            <!--发送-->
            {{ $t("message_send") }}
          </div>
        </div>
        <div v-if="!isFocusInput && sendCommentOther" style="width: 100%;">
          <slot name="sendCommentOther"></slot>
        </div>
      </div>
    </div>
</template>

<script>
import CommentList from '@/repeatComponents/commentList/CommentList';
import ShareCommon from '../common/ShareCommon';
import PlayTour from '@/repeatComponents/playTour/PlayTour';
import {Dialog} from 'vant';
import {cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'detail',
    components: {
        ShareCommon,
        CommentList,
        PlayTour
    },
    data() {
        return {
            onFetching: false,
            isTop: false,
            item: '', //详情内容
            tags: [], //标签
            playedVideo: false, //是否播放视频
            playedAudio: false, // 是否播放音频
            picList: [], //pic图
            picIndex: 1,
            imgIndex: 0,
            previewerImgs: [],
            pageNo: 1,
            page: {
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                init: true
            },
            itmCommentTotal: 0, //评论总数
            collectionTip: false,
            collectionMsg: '',
            expand: false,
            descIcon: false,
            isHandle: false,
            isFocusInput: false, //输入框是否获得焦点
            playTour: {
                code: 'KNOWLEDGE',
                dataId: 0,
                localIntegral: 0
            },
            confirmTip: false,
            sendCommentOther: true,
            userIdObj: {},
            module: 'Knowledge',
            commentList: [],
            total: 0,
            deleteUserId: {},
            showComment: false,
            isLoadingData: false,
            isRefresh: false
        };
    },
    methods: {
        ...{ cwnDecrypt },
        copyResourcePath(path) {
            let ele = document.getElementById('resourcesPath');
            ele.value = path;
            ele.select();
            document.execCommand('copy');
            Dialog.alert({
                width: '180px',
                confirmButtonText: this.$t('mall_10'),
                confirmButtonColor: '#00aeef',
                message: this.$t('copy_tips')
            });
        },
        inputBlur(type) {
            if (type === 0) {
                this.$refs.commentInput0.setAttribute(
                    'placeholder',
                    this.$t('comment_write')
                ); //写评论...
                // this.isFocusInput = false;
                if (this.$refs.commentInput0.innerHTML === '') {
                    this.userIdObj = {};
                }
            } else {
                this.$refs.commentInput1.setAttribute(
                    'placeholder',
                    this.$t('comment_write')
                ); //写评论...
                // this.isFocusInput = false;
                if (this.$refs.commentInput1.innerHTML === '') {
                    this.userIdObj = {};
                }
            }
        },
        focusInput(name, id, userId, repalyTo, index) {
            this.userIdObj = {
                id,
                userId,
                repalyTo,
                index
            };
            this.$refs.commentInput0.focus();
            this.$refs.commentInput0.setAttribute('placeholder', `@${name}`);
        },
        downDoc(url) {
            window.open(url);
        },
        favoritesHandle(id, isFavorites) {
            if (this.isHandle) {
                return true;
            }
            this.isHandle = true;
            let method = 'POST';
            if (isFavorites) {
                method = 'DELETE';
            }
            this.$axios({
                method: method,
                url: `/app/api/collect`,
                params: {
                    targetId: id,
                    module: 'KNOWLEDGE'
                }
            }).then(res => {
                if (isFavorites) {
                    this.item.favoritesCount -= 1;
                } else {
                    this.item.favoritesCount += 1;
                }
                this.item.favorites = !isFavorites;
                this.isHandle = false;
            });
        },
        likeHandle(id, isLike, index) {
            if (this.isHandle) {
                return;
            }
            this.isHandle = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/valuation/like`,
                data: {
                    isComment: false,
                    isLike: !isLike,
                    targetId: id,
                    typeEnum: 'KNOWLEDGE'
                }
            }).then(res => {
                if (isLike) {
                    this.item.valuationCount -= 1;
                } else {
                    this.item.valuationCount += 1;
                }
                this.isHandle = false;
                this.item.valuation = !isLike;
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.item = '';
                this.tags = [];
                this.picList = [];
                this.previewerImgs = [];
                this.pageNo = 1;
                this.getKnowledgeDetail();
                this.isRefresh = false;
            }, 900);
        },
        /*评论加载成功回调*/
        changeSuccess() {
            this.onFetching = false;
        },
        deletecomments() {
            this.commentList = [];
        },
        //滚动记载方法
        onScrollBottom() {
            if (!this.onFetching) {
                this.onFetching = true;
                this.pageNo += 1;
            }
        },
        //获取评论列表
        getCommentList() {
            if (this.isLoadingData) {
                return;
            } else {
                this.isLoadingData = true;
            }
            this.$axios({
                method: 'POST',
                // url: `/app/comment/${this.module}/commentPageJson/${this.id}`,
                url: `/app/api/comment/list`,
                params: {
                    pageSize: 10,
                    sortname: 's_cmt_create_datetime',
                    sortorder: 'desc',
                    moreCommentCount: this.moreCommentCount
                        ? this.moreCommentCount
                        : 'false',
                    pageNo: this.page.pageNo
                },
                data: {
                    targetId: this.item.kbiId,
                    isTop: true,
                    type: this.module.toUpperCase()
                }
            }).then(res => {
                //
                if (res.data) {
                    this.isLoadingData = false;
                    //总回复数，等于回复是+子回复数
                    this.$emit('change-success', res.data);
                    if (this.moreCommentCount) {
                        // this.total = res.data.moreCommentCount;
                        //2020-11-27 11:20:53
                        if (res.data.moreCommentCount) {
                            this.total = res.data.moreCommentCount;
                        } else {
                            this.total = res.data.totalRecord;
                        }
                    } else {
                        // this.total = res.data.total;
                        this.total = res.data.totalRecord;
                    }
                    if (res.data.results && res.data.results.length > 0) {
                        this.$refs.comment.commentLists = [...this.commentList, ...res.data.results];
                    }
                    if (this.isShowMover) {
                        this.showMoverFn();
                    }
                    //后台分页数据统计
                    this.page.pageNo++;
                    this.page.pageSize = res.data.pageSize;
                    this.page.totalRecord = res.data.totalRecord;
                    this.page.totalPage = res.data.totalPage;
                    this.page.init = false;
                    if (this.page.pageNo <= this.page.totalPage) {
                        setTimeout(() => {
                            this.$store.state.course.onFetching = false;
                        }, 800);
                    }
                }
                //更新父类评论总数
                this.$emit('upLen', this.total);
            });
        },
        onScroll(position) {
            // if (this.item.kbiType !== 'ARTICLE') {
            //     if (position > 10) {
            //         this.$refs.orderFullScreen02.$el.style.opacity = '0';
            //     } else {
            //         this.$refs.orderFullScreen02.$el.style.opacity = '1';
            //     }
            //     this.$refs.orderFullScreen.$el.style.opacity = position / 100;
            // }
        },
        getKnowledgeDetail() {
            this.$axios({
                method: 'GET',
                // url: `/app/kb/center/mobile/detailJson/${this.$route.params.id}`
                // url: `/app/api/trainee/kb/item/detail/${this.cwnDecrypt(this.$route.params.id)}`
                url: `/app/api/trainee/kb/item/detail/${this.$route.params.id}`
            }).then((res) => {
                this.onFetching = false;
                this.isTop = true;
                this.item = res.data;
                this.playTour.dataId = res.data.kbiId;
                // this.tags = res.data.kbItem.tags;
                var list = [];
                for (var i = 0; i < this.item.attachments.length; i++) {
                    if (this.item.attachments[i].url) {
                        list.push({
                            src: this.appUrl + this.item.attachments[i].url,
                            img: this.appUrl + this.item.attachments[i].url
                        });
                    }
                }
                this.picList = list;
                this.previewerImgs = JSON.parse(JSON.stringify(list));
                this.itmCommentTotal = res.data.commentCount;
                if (this.item && this.item.kbiDesc && this.item.kbiDesc !== '') {
                    this.textContent(this.item.kbiDesc);
                }
            }).catch(res => {
                this.collectionMsg = res.response.data.errMsg;
                this.confirmTip = true;
                // this.$router.go(-1);
            });
        },
        descMore() {
            this.expand = !this.expand;
        },
        /*打开文档*/
        openDoc(docUrl) {
            if (docUrl) {
                docUrl = encodeURIComponent(docUrl.replace(/&amp;/g, '&'));
            };
            window.localStorage.setItem('kbTitle', this.item.kbiTitle);
            this.$router.push({path: '/docPage', query: {docUrl}});
        },
        /*视频播放*/
        playVideo() {
            this.$refs.video.play();
            this.playedVideo = true;
        },
        /**
         * 音频播放
         * */
        playAudio() {
            this.$refs.audio.play();
            this.playedAudio = true;
        },
        indexChange(index) {
            this.picIndex = index + 1;
        },
        alertTip() {
            this.$refs.previewer.show(this.imgIndex);
        },
        jumpComment() {
            this.$refs.scrollerBottom.reset(this.$refs.conmmentList.clientHeight);
        },
        upLen(len) {
            this.itmCommentTotal = len;
        },
        isCollection(action, res) {
            if (action === 'add') {
                this.$toast(this.$t('collect_success'));//收藏成功
            } else if (action === 'cancel') {
                this.$toast(this.$t('collect_cancel'));//已取消收藏
            }
        },
        expandText(text) {
            return text.slice(0, 50);
        },
        textContent(value) {
            let num = 0;
            for (let i = 0; i < value.length; i++) {
                if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                    num += 2;
                } else {
                    num += 1;
                }
            }
            if (num > 100) {
                this.expand = true;
                this.descIcon = true;
            } else {
                this.expand = false;
                this.descIcon = false;
            }
        },
        //开启打赏页面
        toPlayTour() {
            this.$refs.playTour.openPlayTour();
        },
        //打赏成功(){
        playTourSuccessful() {
            this.getIntegral();
            Dialog.alert({
                width: '180px',
                confirmButtonText: this.$t('mall_10'),
                confirmButtonColor: '#00aeef',
                message: this.$t('circle294')
            });
        },
        postComment(type) {
            let {
                id = this.item.kbiId,
                userId = 0,
                repalyTo = userId,
                index
            } = this.userIdObj;
            var len = 0;
            let parData = {
                commentId: this.userIdObj.id ? this.userIdObj.id : 0,
                topCommentId: this.userIdObj.repalyTo ? this.userIdObj.repalyTo : 0,
                content: this.$refs.commentInput0.innerText,
                type: this.module.toUpperCase()
            };
            if (!this.userIdObj.repalyTo) {
                parData.targetId = this.item.kbiId;
            }
            if (type === 0) {
                for (var i = 0; i < this.$refs.commentInput0.innerText.length; i++) {
                    if (
                        this.$refs.commentInput0.innerText.charCodeAt(i) > 127 ||
                        this.$refs.commentInput0.innerText.charCodeAt(i) === 94
                    ) {
                        len += 2;
                    } else {
                        len += 1;
                    }
                }
                if (len > 0 && len <= 400) {
                    this.$axios({
                        method: 'POST',
                        url: `/app/api/comment`,
                        params: {
                        },
                        data: parData
                    }).then(res => {
                        this.$refs.comment.conmmentList = [];
                        this.$refs.commentInput0.innerText = '';
                        this.userIdObj = {};
                        this.total = 0;
                        this.page.pageNo = 1;
                        this.getCommentList();
                    });
                } else if (len === 0) {
                    this.$toast(this.$t('message_please_content'));
                } else {
                    this.$toast(this.$t('comment_max_input'));
                }
            } else {
                for (var j = 0; j < this.$refs.commentInput1.innerText.length; j++) {
                    if (
                        this.$refs.commentInput1.innerText.charCodeAt(j) > 127 ||
                        this.$refs.commentInput1.innerText.charCodeAt(j) === 94
                    ) {
                        len += 2;
                    } else {
                        len += 1;
                    }
                }
                if (len > 0 && len <= 400) {
                    this.$axios({
                        method: 'POST',
                        url: `/app/api/comment`,
                        params: {
                        },
                        data: parData
                    }).then(res => {
                        this.$$refs.comment.conmmentList = [];
                        this.$refs.commentInput0.innerText = '';
                        this.userIdObj = {};
                        this.total = 0;
                        this.page.pageNo = 1;
                        this.getCommentList();
                    });
                } else if (len === 0) {
                    this.$toast(this.$t('message_please_content'));
                } else {
                    this.$toast(this.$t('comment_max_input'));
                }
            }
        },
        getIntegral() {
            this.$axios({
                url: '/app/credit/user'
            }).then(res => {
                this.playTour.localIntegral = res.data || 0;
            });
        }
    },
    mounted() {
        this.getKnowledgeDetail();
        this.getIntegral();
    }
};
</script>

<style scoped lang="less">
    .selectType-box-02 {
        background: #ffffff;
        padding-bottom: 5px;
    }
    .selectType-box-02 ul li {
        float: left;
        padding: 0 10px;
        font-size: 12px;
        color: #999999;
        background: #fafafa;
        border-radius: 4px;
        min-height: 25px;
        line-height: 25px;
        margin: 0 15px 15px 0;
    }
    .play-box {
        position: relative;
        width: 100%;
        height: 211px;
        margin-top: -211px;
    }
    .bg-banner {
        width: 100%;
        height: 100%;
        background: url(./images/banner-doc.jpg) no-repeat center center;
        background-size: auto 100%;
        position: absolute;
        z-index: 3;
    }
    .play-box video, .play-box .video-box {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .play-box .video-box {
        background: #000000;
    }
    .play-box video {
        z-index: 2;
    }
    .num-08 {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        background: rgba(0,0,0,0.5);
        border-radius: 10px;
        color: #ffffff;
        position: absolute;
        right: 15px;
        top: 16px;
    }
    .detail-voting{
        background-color: white;
        width: 100%;
    }
    .detail-voting span:last-child:before{
        width: 20px;
        height: 20px;
        content: '';
        display: inline-block;
        background: url(../../../static/images/icon-03.png) no-repeat 0 -116px;
        background-size: 20px;
        margin-bottom: 7px;
    }
    .detail-voting span{
        width: calc(100% / 3);
        color: #666666;
        display: flex;
        align-items: center;
        flex-flow: column;
    }
    .play-info{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 25px;
    }
    .play-tour{
        font-size: 22px;
        color: #666;
        display: inline-block;
        width: 30px;
        text-align: center;
   }
 .detail-voting{
        position: relative;
        bottom: -87px;
        z-index: 999;
    }
   /*发布评论*/
.sendComment {
  /* display: flex; */
  justify-items: center;
  align-items: center;
  position: fixed;
  bottom: 0px;
  height: 130px;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #dddddd;
  flex-wrap: nowrap;
  z-index: 98;
}
.commentFoot-contenteditable {
  width: calc(100% - 20%);
  min-height: calc(56px - 30px);
  max-height: 100px;
  float: left;
  border: none;
  font-size: 14px;
  overflow-y: auto;
  padding: 15px;
  outline: none;
}
.commentFoot-contenteditable:empty:before {
  content: attr(placeholder);
  color: #bbb;
}
.commentFoot-contenteditable:before {
  content: none;
}
.commentFoot-issue {
  float: left;
  line-height: 56px;
  font-size: 14px;
  color: #075ebb;
}
/*评论*/
.comment-content {
  height: calc(100% - 56px);
  box-sizing: border-box;
}
/deep/.van-dialog__content {
    padding: 20px;
}
/deep/ .img-max-size img {
    max-width: 100%;
    height: auto;
}
</style>
